<template>
    <view class="contenter">
        <view class="CON-TOP" @click="checkItem">
            <view class="orderNumber">订单编号: {{ Item.orderSn }}</view>
            <view class="orderStauts">{{ statusList() }}</view>
        </view>
        <up-line></up-line>
        <view class="CONT-BOTTOM">
            <view class="CB-TOP" @click="checkItem">
                <view class="CBTL">
                    <up-image :src="baseUrl + Item.travel?.pic" width="136rpx" height="136rpx" radius="4" ></up-image>
                </view>
                <view class="CBTR">
                    <view class="CBTR-Left">
                        <view class="CBTRL-Top">
                            <view class="Name">{{ Item.travel?.name }}</view>
                            <view class="address">地址:{{ Item.travel?.address }}</view>
                        </view>
                        <view class="CBTRL-Bottom">
                            <view class="type" v-for="(item,index) in Item.travel?.feature" :key="index">{{ item }}</view>
                        </view>
                    </view>
                    <view class="CBTR-Right">
                        <priceNumber :price="Item.travel?.price"></priceNumber>
                        <view>×1</view>
                    </view>
                </view>
            </view>
            <view class="CB-BOTTOM">
                <view class="Time">创建时间: {{ Item.createTime }}</view>
                <view  v-if="Item.status == 101 || Item.status == 201" class="CancelOrder" @click="CancelOrder">取消订单</view>
                <!-- <view class="DeleteOrder">取消订单</view> -->
            </view>
        </view>
    </view>
</template>

<script setup>
import env from '@/config/common.js'
import priceNumber from '@/components/priceNumber.vue'
import { onMounted, ref } from 'vue';
const baseUrl = ref(env.API_BASE_URL_DEV) 
const prop = defineProps({
    Item:{
        type:Object,
        default:()=>{}
    }
})
const emit = defineEmits(['checkItem','Cancel'])
function checkItem(){
    emit('checkItem',prop.Item.id)
}
function CancelOrder(){
    emit('Cancel',prop.Item.id)
}
function statusList (){
    return prop.Item.status == 101 ? '待预约' : prop.Item.status == 201 ? '已预约' : prop.Item.status == 301 ? '已完成' : prop.Item.status == 302 ? '已过期' : prop.Item.status =401 ? '退款中' : '已退款'
}
onMounted(()=>{
    // console.log(prop.Item);
})
</script>

<style lang="scss" scoped>
.contenter{
    padding: 0 30rpx;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    background-color: #fff;
    .CON-TOP{
        display: flex;
        padding: 30rpx 0 ;
        align-items: center;
        justify-content: space-between;
        .orderNumber{
            font-weight: 400;
            font-size: 26rpx;
            color: #666666;
        }
        .orderStauts{
            font-weight: 400;
            font-size: 22rpx;
            color: #333333;
        }
    }
    .CONT-BOTTOM{
        padding: 30rpx 0;
        .CB-TOP{
            display: flex;
            margin-bottom: 30rpx;
            .CBTL{
                margin-right: 24rpx;
            }
            .CBTR{
                flex: 1;
                display: flex;
                justify-content: space-between;
                .CBTR-Left{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .CBTRL-Top{
                        .Name{
                            font-weight: bold;
                            font-size: 30rpx;
                            color: #111111;
                            margin-bottom: 4rpx;
                        }
                        .address{
                            width: 300rpx;
                            font-weight: 400;
                            font-size: 24rpx;
                            color: #666666;
                            overflow: hidden;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 1;
                        }
                    }
                    .CBTRL-Bottom{
                        display: flex;
                        align-items: center;
                        .type{
                            font-weight: 400;
                            font-size: 18rpx;
                            color: #46A7FD;
                            margin-right: 8rpx;
                            padding: 2rpx 10rpx;
                            background-color: #DAEDFF;
                        }
                    }
                }
                .CBTR-Right{
                    display: flex;
                    align-items: flex-end;
                    flex-direction: column;
                    justify-content: center;
                }   
            }
        }
        .CB-BOTTOM{
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Time{
                font-weight: 400;
                font-size: 22rpx;
                color: #333333;
            }
            .CancelOrder{
                font-weight: 400;
                font-size: 26rpx;
                color: #333333;
                padding: 16rpx 28rpx;
                border-radius: 50rpx;
                border: 1rpx solid #e5e5e5;
            }
            .DeleteOrder{
                font-weight: 400;
                font-size: 26rpx;
                color: #999999;
                padding: 16rpx 28rpx;
                border-radius: 50rpx;
                border: 1rpx solid #e5e5e5;
            }
        }
    }
}
</style>